<template>
  <el-row :gutter="16">
    <el-col :span="5">
      <message-list
        ref="messageListRef"
        @select="selectUser"
        :users="usersFrom"
        :pageNum="pageNum"
      />
    </el-col>
    <el-col :span="13">
      <chat :userId="userId" @update-users="handleUsersUpdate" />
    </el-col>
    <el-col :span="6">
      <add-form @refresh="handleRefresh" />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref } from "vue";
import messageList from "./messageList.vue";
import chat from "./chat.vue";
import addForm from "./addForm.vue";

interface User {
  username: string;
  lastTime?: string;
  status?: string;
}

const userId = ref<string>("");
const usersFrom = ref<User[]>([]);
const pageNum = ref(1);

// 选择用户
const selectUser = (key: string) => {
  console.log("选择用户:", key);
  userId.value = key;
  pageNum.value = 1; // 重置页码
};

// 更新用户列表
const handleUsersUpdate = (newUsers: User[]) => {
  console.log("收到用户列表更新:", newUsers);
  usersFrom.value = newUsers;
};

// 存储选中的用户
const selectedUser = ref("");

// 处理子组件触发的事件
const handleUserSelect = (key: string) => {
  console.log("父组件接收到的用户ID:", key);
  selectedUser.value = key; // 更新选中的用户
};

const messageListRef = ref();

// 添加刷新处理方法
const handleRefresh = () => {
  // 调用 messageList 组件的 loadCustomers 方法刷新列表
  if (messageListRef.value) {
    messageListRef.value.loadCustomers();
  }
};
</script>

<style scoped>
.el-row {
  margin: 0 !important;
}
</style>
